<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="hasFixedFlag" conCol="#000" bgColor="zxsDet">
			<block slot="content">咨询师详情</block>
		</custom-nav-sq-xcx>
		<user-info></user-info>
		<luBarTabNav :tabList="tabList" :barFixed="barFixed" :iconShow="iconShow" :barHeight="barHeight" :barTop="barTop" :barId="barId" ref="barTabNav">
			<view class="padd">
				<view id="item1" class="tabbody">
					<per-profile></per-profile>
				</view>
				<view id="item2" class="tabbody">
					<pj-list currPage="zxsDet"></pj-list>
				</view>
				<view id="item3" class="tabbody">
					<view class="queTit spaceBet">
						<text class="tit">问题解答</text>
						<view class="more" @tap="goMoreJd">
							<text>查看更多</text>
							<text class="iconfont icon-gengduo"></text>
						</view>
					</view>
					<que-list></que-list>
				</view>
				<view id="item4" class="tabbody">
					<view class="queTit spaceBet">
						<text class="tit">所属机构</text>
					</view>
					<ogz-info></ogz-info>
				</view>
			</view>
		</luBarTabNav>
		<view class="botGroup">
			<view class="focItem">
				<view class="iconfont icon-wujiaoxing"></view>
				<view>关注</view>
			</view>
			<view class="focItem">
				<view class="iconfont icon-wujiaoxing"></view>
				<view>客服</view>
			</view>
			<button class="comBtn">立即预约</button>
		</view>
	</view>
</template>

<script>
	import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
	import UserInfo from './components/UserInfo.vue'
	import PerProfile from './components/PerProfile.vue'
	import PjList from './components/PjList.vue'
	import QueList from './components/QueList.vue'
	import OgzInfo from './components/OgzInfo.vue'
	export default {
		components:{
			luBarTabNav,
			UserInfo,
			PerProfile,
			PjList,
			QueList,
			OgzInfo
		},
		data(){
			return{
				hasFixedFlag:false,
				barFixed: true,
				barHeight: 0,
				barTop: 0,
				barId: 0,
				tabList: [{
					text: "个人简介",
					navTarget: "#item1",
					iconClass: "icon01",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "服务评价",
					navTarget: "#item2",
					iconClass: "icon02",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "问题解答",
					navTarget: "#item3",
					iconClass: "icon03",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "所属机构",
					navTarget: "#item4",
					iconClass: "icon04",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}]
			}
		},
		onLoad(){
			this.navHeight = getApp().globalData.navHeight;
			this.barTop = this.barHeight = this.navHeight;
		},
		onPageScroll: function(e) {
			const { scrollTop } = e;
			if(scrollTop >= this.navHeight){
				this.hasFixedFlag = true;
			}else{
				this.hasFixedFlag = false;
			}
			this.$refs.barTabNav._selectedTab(e.scrollTop);
		},
		methods:{
			goMoreJd(){
				uni.navigateTo({
					url:'/pages/subSqIndex/xlzx/zxsJd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbody{
		$grayCol:#8f91af;
		background: $sq-fuf;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		.queTit{
			padding: 15rpx 0;
			margin-bottom: 20rpx;
			.tit{
				font-size: 30rpx;
				color: $sq-main0;
				font-weight: 600;
			}
			.more{
				font-size: 26rpx;
				color:$grayCol;
				display: flex;
				align-items: center;
				.icon-gengduo{
					font-size: 20rpx;
					margin-left: 5rpx;
				}
			}
		}
	}
	.botGroup{
		height: 120rpx;
		background: #fff;
		position: sticky;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		box-shadow: 0px -4rpx 6rpx #EFEEFC;
		.focItem{
			width: 120rpx;
			text-align: center;
			color: $sq-main8;
			font-size: 26rpx;
		}
		.comBtn{
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			margin-right: 30rpx;
			background: $pss-sq-main;
			border-radius: 30rpx;
		}
	}
</style>